<template>
  <div class="merchart-chart yao-chart">
    <month-condition class="month-condition" @change="query" />
    <el-col :xs="24" :sm="24" :lg="12">
      <yao-bar-chart :chart-data="chartData" />
    </el-col>
    <el-col :xs="24" :sm="24" :lg="12">
      <yao-pie-chart :chart-data="chartData" />
    </el-col>
  </div>
</template>

<script>
import YaoBarChart from './YaoBarChart'
import YaoPieChart from './YaoPieChart'
export default {
  components: {
    MonthCondition: () => import('./MonthCondition'),
    YaoBarChart,
    YaoPieChart
  },
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null,
      chartData: []
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    query(monthDate) {
      const param = {
        monthDate
      }
      this.get('/medicine/getMedicineSaleTop10', param, { showLoading: false }).then(ret => {
        this.chartData = ret
      })
    }
  }
}
</script>
<style lang="scss">
  .merchart-chart.yao-chart .month-condition {
    top: 52px;
    right: 80px;
  }
</style>
